<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 目标名称、状态搜索框 -->
        <el-form ref="addDept" :inline="true" class="demo-form-inline">
          <el-row type="flex" justify="space-between" align="middle">
            <el-col>
              <el-form-item :model="formTwo" label="学科名称">
                <el-input v-model="formTwo.subjectName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="resetForm">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button
                  style="background: #67c23a; color: #fff"
                  @click="openDrawer('add')"
                  >新增学科</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 警告栏 -->
          <el-alert type="info" class="alert" :closable="false" show-icon
            >数据一共{{ total }}条</el-alert
          >

          <!-- 表格 -->
          <el-table :data="newTableData" style="width: 100%">
            <el-table-column width="50px" type="index" label="序号">
            </el-table-column>
            <el-table-column prop="subjectName" label="学科名称">
            </el-table-column>
            <el-table-column prop="username" label="创建者"> </el-table-column>
            <el-table-column prop="addDate" label="创建日期"> </el-table-column>
            <el-table-column prop="isFrontDisplay" label="前台是否能显示">
              <template slot-scope="scope">
                {{ scope.row.isFrontDisplay ===1?'是':'否' }}
              </template>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录">
            </el-table-column>
            <el-table-column prop="tags" label="标签"> </el-table-column>
            <el-table-column prop="totals" label="题目数量"> </el-table-column>

            <el-table-column width="250px" prop="" label="操作">
              <template #default="{ row }">
                <el-button type="text" @click="tiao(row)">学科分类</el-button>
                <el-button type="text" @click="tiao1(row)">学科标签</el-button>
                <el-button type="text" @click="openDrawer('edit', row.id)"
                  >修改</el-button
                >
                <el-button type="text" @click="del(row.id)">删除</el-button>
              </template >
            </el-table-column>
          </el-table>
        </el-form>
        <!-- 分页器 -->
        <div class="block">
          <el-pagination
            background
            :total="total"
            :current-page="tagForm.page"
            :page-sizes="[5,10,20,50]"
            :page-size="tagForm.pagesize"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout=" sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 弹出框 -->
    <div>
      <el-dialog :visible="showDialog" width="25%" :title="drawerTitle" @close="close">
        <el-form :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="subjectName" label="学科名称">
            <el-input
              v-model="form.subjectName"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
            :active-value="1"
            :inactive-value="0"
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="sbmit">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      counts: '',
      value: 1,
      formTwo: {
        subjectName: '',
        isFrontDisplay: '',
        page: 1,
        pagesize: 10
      },
      form: {
        subjectName: '', // 前台是否能显示
        isFrontDisplay: '',
        id: null
      },
      tagForm: {
        tags: '',
        state: '',
        page: 1, // 当前页码
        pagesize: 5, // 一页多少条
        tagName: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      tableData: [],
      newTableData: [],
      total: 0,
      showDialog: false,
      drawerType: 'add'
    }
  },
  computed: {
    drawerTitle () {
      let title = ''
      if (this.drawerType === 'add') title = '添加学科'
      if (this.drawerType === 'edit') title = '修改学科'
      return title
    }
  },
  created () {
    this.list()
  },
  methods: {
    // 搜索
    async search () {
      const { data } = await list({
        subjectName: this.formTwo.subjectName,
        page: this.formTwo.page,
        pagesize: this.formTwo.pagesize
      })
      console.log(data, '搜索')
      this.newTableData = data.items
      console.log(this.newTableData)
      this.total = data.counts
      this.resetForm()
    },
    resetForm () {
      console.log('清除')
      this.formTwo.subjectName = ''
    },
    // 跳转
    tiao (row) {
      console.log(row)
      this.$router.push({
        path: './directorys',
        query: {
          id: row.id
        }
      })
    },
    tiao1 (row) {
      console.log(row)
      this.$router.push({
        path: './tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 模态框
    async openDrawer (type, id) {
      console.log(id)
      console.log(type)
      this.showDialog = true
      this.drawerType = type
      if (type === 'edit') {
        const res = this.tableData.find((item) => item.id === id)
        console.log(res)
        this.form.id = res.id
        this.form.subjectName = res.subjectName
        this.value = res.isFrontDisplay
      }
    },
    // 选中条数渲染
    handleSizeChange (val) {
      this.tagForm.pagesize = val
      this.list()
      // console.log(this.pagesize, '111111')
    },
    // 跳转到相应页面
    handleCurrentChange (value) {
      console.log(value)
      this.tagForm.page = value
      this.list()
    },

    // 获取页面数数据
    async list () {
      const res = await list(this.tagForm)
      console.log(res.data)
      this.tableData = res.data.items
      this.newTableData = JSON.parse(JSON.stringify(this.tableData))
      // this.newTableData.forEach((item) => {
      //   item.isFrontDisplay = item.isFrontDisplay === 1 ? '是' : '否'
      // })
      this.total = res.data.counts
      this.page = res.data.page
    },
    // 模态框确认
    async sbmit () {
      await this.$refs.addDept.validate()
      if (this.drawerType === 'add') {
        console.log('添加', this.form.subjectName)
        await add({
          subjectName: this.form.subjectName,
          id: +new Date(),
          isFrontDisplay: this.value
        })
        this.$message.success('添加成功')
      }
      if (this.drawerType === 'edit') {
        const subjectName = this.form.subjectName
        const id = this.form.id
        const isFrontDisplay = this.value
        await update({ subjectName, id, isFrontDisplay })
      }

      this.close()
      this.showDialog = false
      this.list()
    },
    // 删除
    async del (id) {
      this.$confirm('您确认要删除该部门吗').then(async () => {
        const sss = this.tableData.find((item) => item.id === id)
        console.log(sss)
        await remove(sss)
        this.$message.success('删除成功')
        this.list()
      }).catch(() => {

      })
    },
    // 取消按钮
    async close () {
      await this.$refs.addDept.resetFields()
      this.form = {
        subjectName: '', // 学科名称
        isFrontDisplay: 1,
        id: null
      }
      this.showDialog = false
    }
  }
}
</script>

<style scoped>
.block {
  margin-top: 20px;
  text-align: right;
}
</style>
